<template>
  <div>
    <h1>Input输入框组件</h1> <!-- {placeholder:占位符}-->
    <table>
      <tr>
        <td><el-input v-model="username" placeholder="请输入内容" clearable prefix-icon="el-icon-user" disabled></el-input></td>
      </tr>
    </table>
    <table>
      <tr>
        <td>
          <el-input v-model="username1" placeholder="请输入内容" show-password clearable suffix-icon="el-icon-user" ></el-input>
          </td>
      </tr><br /><br />
      <tr>
        <td>
          <el-input v-model="username2" placeholder="请输入内容"  type="textarea" rows="2"></el-input>
          <el-input v-model="username3" placeholder="请输入内容"  type="textarea" rows="2" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          <el-input v-model="username4" placeholder="请输入内容"  type="textarea" rows="2" autosize></el-input>
         </td>
      </tr>
    </table>
    <h1>复合型输入框</h1>
    <table>
      <tr>
        <td>

            <el-input placeholder="请输入内容" v-model="input1" size=" large">
              <template slot="prepend">Http://</template>
            </el-input>
            <el-input placeholder="请输入内容" v-model="input2" size="small">
              <template slot="append">.com</template>
            </el-input>
            <el-input placeholder="www.baidu.com" v-model="input3" clearable prefix-icon="el-icon-user" size="mini">
              <template slot="prepend">Http://</template>
              <template slot="append">.com</template>
            </el-input>
        </td>
      </tr>
    </table>
    <h1>输入长度限制</h1>
      <el-input
        type="text"
        placeholder="请输入内容"
        v-model="username5"
        maxlength="10"
        show-word-limit
        prefix-icon="el-icon-user"
        suffix-icon="el-icon-user"
      >
      </el-input>
      <div style="margin: 20px 0;"></div>
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="username6"
        maxlength="30"
        show-word-limit
      ></el-input>

      <h1>事件</h1>
      <el-input
      v-model="username7"
      placeholder="请输入内容"
      clearable prefix-icon="el-icon-user"
      @focus="aa"
      @blur="bb"
      @select="cc"
      @change="dd"
      @input="ee"
      @clear="ff"
      ref="chufa"
      > </el-input>
      <el-button @click="gg">使input获取焦点</el-button>
      <el-button @click="hh">使input失去焦点</el-button>
      <el-button @click="ii">选中input中的文字</el-button>
    <br /><br /><br />


  </div>
</template>

<script>
  export default{
    name: "Input",
    data(){
      return{
        username: "",
        username1: "",
        username2: "",
        username3: "",
        username4: "",
        username5: "",
        username6: "",
        username7: "",
        input1: "",
        input2: "",
        input3: "",
      }
    },
    methods:{
      aa(){
        console.log("获得焦点");
      },
      bb(){
        console.log("失去焦点");
      },
      cc(){
        console.log("文字被选中");
      },
      dd(){
        console.log("按下回车或失去焦点触发（前提是值要改变）");
      },
      ee(){
        console.log("input的值发生改变");
      },
      ff(){
        console.log("清空时触发");
      },
      gg(){
        this.$refs.chufa.focus()
      },
      hh(){
         this.$refs.chufa.blur();
      },
      ii(){
        this.$refs.chufa.select();
      }
    }
  }
</script>

<style>
</style>
